<template>
  <div v-if="Date.parse(meeting_info.signUpDDL) >= new Date()">
    <van-nav-bar
      class="page-nav-bar"
      title="报名"
      right-text="登录"
      @click-right="this.$router.push('/login')"
    />
    <div style="width:325px;margin-left:25px">
    <van-row>
      <van-col>
        <p style="font-size: 17px">会议名称：{{ meeting_info.name }}</p>
      </van-col>
    </van-row>
    <van-row>
      <van-col>
        <p style="font-size: 17px">
          主办方：{{ meeting_info.host ? meeting_info.host : '暂未设定' }}
        </p>
      </van-col>
    </van-row>
    <van-row>
      <van-col>
        <p style="font-size: 17px">
          时间：{{
            meeting_info.start ? dateFliter2(meeting_info.start) : '暂未设定'
          }}
          ~ {{ meeting_info.end ? dateFliter2(meeting_info.end) : '暂未设定' }}
        </p>
      </van-col>
    </van-row>
    <van-row>
      <van-col>
        <p style="font-size: 17px">
          地址：{{ meeting_info.address ? meeting_info.address : '暂未设定' }}
        </p>
      </van-col>
    </van-row>
    <van-row>
      <van-col>
        <p style="font-size: 17px">选择场次：</p>
      </van-col>
    </van-row>
    <van-form>
      <van-checkbox-group v-model="checked">
        <van-checkbox
          :name="item.id"
          v-for="item in meeting_info.sections"
          :key="item.id"
        >
          <p style="font-size: 15px">场地名称：{{ item.name }}</p>
          <p style="font-size: 15px">
            时间：{{ item.start ? dateFliter(item.start) : '暂未设定' }}--{{
              item.end ? dateFliter(item.end) : '暂未设定'
            }}
          </p>
        </van-checkbox>
      </van-checkbox-group>
      <van-row>
        <van-col>
          <p style="font-size: 17px">上传人脸照片：<font style="font-size:12px">(建议文件大小不能超过 1MB)</font></p>
        </van-col>
      </van-row>
      <van-field name="uploader">
        <template #input>
          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            accept="image/*"
            :max-size="1024 * 1024"
            @oversize="onOversize"
          />
        </template>
      </van-field>

      <van-tag>提醒：可能会影响会议当天的签到效果</van-tag>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="onSubmit"
        >
          提交
        </van-button>
        </div>
    </van-form>
    </div>
  </div>
  <div v-else>
    <h4 style="text-align: center">报名已截止</h4>
    <p style="font-size: 20px; text-align: center;margin-top:100px">
      如有疑问请联系我们：<br />
      李**，电话：136********
    </p>
  </div>
</template>
<script>
import { invitation, getMeeting } from '../../api';
import { Toast, Dialog } from 'vant';
import jwtDecode from 'jwt-decode';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      meeting_info: {},
      checked: [],
      fileList: [],
      formData: new FormData(),
      maxSize: 3*1024
    };
  },

  mounted() {
    this.getMeetingInfo();
  },
  methods: {
    
    afterRead(file) {
      // console.log(file.file.size);
      // console.log(file.file.size/1024);
      // if(file.file.size/1024>300){
      //   Toast('文件名不能大于300MB');
      //   file.status = 'failed';
      //   file.message = '上传失败';
      // }else{
      //   console.log('大小合理')
      // }
      this.formData.append('face', file.file);
    },
    onOversize(file){
      console.log(file);
      Toast('文件大小不能超过 1MB');
    },
    async onSubmit() {
      console.log('onSubmit');
      const loginData = JSON.parse(localStorage.getItem('TOUTIAO_USER'));

      var code;
      var flag = false;
      if (loginData && loginData.data) {
        code = jwtDecode(loginData.data);
        flag = true;
      }
      if (flag) {
        if (
          this.fileList.length > 0 &&
          this.fileList !== undefined &&
          this.checked.length > 0 &&
          this.checked !== undefined
        ) {
          const res = await invitation(
            this.formData,
            code.id,
            this.meeting_info.id,
            this.checked
          );
          if (res.data.errCode == 0) {
            Toast.success('报名成功！');
          } else {
            Dialog.alert({
              confirmButtonColor: '#3296fa',
              title: '报名失败',
              message: res.data.errMessage,
            })
              .then(() => {
                // on confirm 再试一次
              })
              .catch(() => {
                // on cancel 退出
              });
          }
        } else {
          Toast('请填写相关信息！');
        }
      } else {
        Toast('请先登录！');
      }
      // console.log('this.submit');
    },
    getMeetingInfo() {
      //获取请求路径
      const router = useRouter();
      const path = router.currentRoute.value.fullPath;
      console.log('path:' + path);
      //获取会议id
      const index = path.lastIndexOf('\=');
      const id = path.substring(index + 1, path.length);
      console.log('id:' + id);
      localStorage.setItem('id', id);
      console.log('mid',window.localStorage.getItem('id'))
      let self = this;
      getMeeting(id).then((res) => {
        let mdata = res.data;
        // console.log('mdata', mdata.data);
        // console.log('mdata.data', mdata);
        self.meeting_info = JSON.parse(JSON.stringify(mdata.data));
        // console.log('mdata', mdata, this.meeting_info);
      });
    },
    dateFliter(val, format = 'MM月DD日 HH:mm') {
      if (!isNaN(val)) {
        val = parseInt(val);
      }
      return dayjs(val).format(format);
    },
    dateFliter2(val, format = 'YYYY年MM月DD日') {
      if (!isNaN(val)) {
        val = parseInt(val);
      }
      return dayjs(val).format(format);
    },
  },
};
</script>

<style>
a:visited {
  color: #3296fa;
}
.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title,
.van-nav-bar__text {
  color: white;
}
.page-nav-bar .van-icon {
  color: #fff;
}
</style>
